<template>
  <div>
    <div class="orderSearch-wrapper">
      <div class="title">驾驶员状态</div>
      <div>
        <el-button :type="driverType === 'LEAVE'? 'primary':''" @click="handleDriverTypeTrend('LEAVE')">请假休息
        </el-button>
        <el-button :type="driverType === 'DRIVER_INSPECT'? 'primary':''"
                   @click="handleDriverTypeTrend('DRIVER_INSPECT')">驾驶证年审
        </el-button>
        <el-button :type="driverType === 'CERTI_INSPECT'? 'primary':''"
                   @click="handleDriverTypeTrend('CERTI_INSPECT')">资格证年审
        </el-button>
        <el-button :type="driverType === 'BODYTEST_INSPECT'? 'primary':''"
                   @click="handleDriverTypeTrend('BODYTEST_INSPECT')">
          体检有效期
        </el-button>
        <el-button :type="driverType === 'RESTUDY_INSPECT'? 'primary':''"
                   @click="handleDriverTypeTrend('RESTUDY_INSPECT')">
          再教育年审
        </el-button>
      </div>
    </div>
    <div class="percent-wrapper">
      <div class="item">
        <div class="label">今日出车驾驶员: {{ driver_todayOut }} 人</div>
        <div class="value">
          <el-progress :text-inside="true" :stroke-width="16" :percentage="driver_todayRatio"/>
        </div>
      </div>
      <div class="item">
        <div class="label">明日出车驾驶员: {{ driver_tomorrowOut }} 人</div>
        <div class="value">
          <el-progress :text-inside="true" :stroke-width="16" :percentage="driver_tomorrowRatio"/>
        </div>
      </div>
    </div>
    <div class="carState-wrapper">
      <v-line3 yName="位" @change="handleDriverChange" :source="driverSource"/>
    </div>
    <Alert
        v-if="popAlert"
        :state="popAlert"
        :datas="popData"
        @getMdState="popAlert = false"
    />
  </div>
</template>

<script>
import moment from "moment";
import {countDriverRemind, findDriverOutPercent} from "@/api/services/dashboard.service";
import vLine3 from './line3'
import Alert from './alert'

export default {
  name: "driverInfoState",
  components: {vLine3, Alert},
  data() {
    return {
      popData: '',
      popAlert: false,
      // 驾驶员状态模块
      driverType: 'LEAVE',
      driverSource: [],
      driver_todayOut: 0,
      driver_todayRatio: 0,
      driver_tomorrowOut: 0,
      driver_tomorrowRatio: 0,
    }
  },
  created() {
    // 驾驶员与车辆默认时间30天
    this.dayOutTime = moment().subtract(0, "days").format("YYYY-MM-DD") + " 00:00:00"
    this.tomorrowOutTime = moment().subtract(-29, "days").format("YYYY-MM-DD") + " 23:59:59"
    this._countDriverRemind()
    this._findDriverOutPercent()
  },
  methods: {

    /* 驾驶员状态 */
    handleDriverTypeTrend(data) {
      this.driverType = data
      this._countDriverRemind()
    },
    _countDriverRemind() {
      let params = {
        searchType: this.driverType,
        stime: this.dayOutTime,
        etime: this.tomorrowOutTime
      }
      countDriverRemind(params).then(res => {
        this.driverSource = res.data || []
      })
    },
    _findDriverOutPercent() {
      // todayOut:今日出车驾驶员,todayRatio:今日百分比,tomorrowOut:明日出车驾驶员,tomorrowRatio:明日百分比}
      findDriverOutPercent().then(res => {
        // 今日出车驾驶员
        this.driver_todayOut = res.todayOut
        this.driver_todayRatio = Number(res.todayRatio)
        // 明日出车驾驶员
        this.driver_tomorrowOut = res.tomorrowOut
        this.driver_tomorrowRatio = Number(res.tomorrowRatio)
      })
    },
    handleDriverChange(data) {
      let ret = this.driverSource.find(item => item.label === data.name)
      let state = {
        'LEAVE': '请假',
        'CERTI_INSPECT': '资格证年审',
        'DRIVER_INSPECT': '驾驶证年审',
        'BODYTEST_INSPECT': '体检有效期',
        'RESTUDY_INSPECT': '再教育年审'
      }
      ret.label = state[this.driverType] + '-' + ret.label
      this.popData = ret
      this.popAlert = true
    },
  }
}
</script>


<style lang="less" scoped>
.orderSearch-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    color: #3A71A8;
    font-size: 18px;
    padding-left: 10px;
    font-weight: bold;
  }
}
.percent-wrapper {
  display: flex;
  padding: 16px 0 10px 0;
  justify-content: space-between;

  .item {
    width: 49%;
    display: flex;
    padding-top: 10px;

    .label {
      font-size: 14px;
      padding-right: 20px;
    }

    .value {
      flex: 1
    }
  }
}
</style>
